<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function f1(obj){
                obj.style.color="red";
            }

            //当页面加载完成后再执行
            window.onload=function(){
                var div=document.querySelector("div");
                console.log(div);

                // 方式二:动态绑定
                // 在JavaScript代码中对某个HTML元素进行事件绑定
                div.onclick=function(){
                    // this表示的是事件源:触发事件的元素
                   this.style.background="yellow";
                };
            };
        </script>
    </head>
    <body>
        <!-- 方式一: 静态绑定：在HTML元素上通过事件句柄对应的属性进行绑定 -->
        <!-- this表示的是事件源:触发事件的元素 -->
        <input type="button" value="按钮" onclick="f1(this)">

        <div>div</div>
    </body>
</html>